<template>
  <div class="page">
    <van-nav-bar title="记录与审批" left-arrow @click-left="$router.go(-1)" @click-right="$router.push('total')">
      <template #right>
        <van-icon name="todo-list-o" size="22"/>
      </template>
    </van-nav-bar>
    <van-row type="flex" align="center" justify="space-between">
      <van-col span="4">
        <van-image round width="3.5rem" height="3.5rem" :src="userInfo.pic" />
      </van-col>
      <van-col span="14" class="info-box">
        <div>李苗苗</div>
        <div>考勤组：{{userInfo.attendGroup}}</div>
      </van-col>
      <van-col span="4">
        <van-icon name="tosend" color= '#fff' size="30" @click="dateModal = true" :badge="currentMonth"/>
      </van-col>
    </van-row>
    <van-tabs title-active-color='#ff6633'>
      <van-tab title="记录">
        <record-list></record-list>
      </van-tab>
      <van-tab title="审批">
        <examine-list></examine-list>
      </van-tab>
    </van-tabs>
    <date-picker-modal :dateModal="dateModal" @cancel="dateModal = false" @dateModalConfrim="dateModalConfrim"/>
  </div>
</template>
<script>
import DatePickerModal from '@/components/datePickerModal/datePickerModal.vue'
import { mapState } from 'vuex'
import ExamineList from './examine-list.vue'
import RecordList from './record-list.vue'
export default {
  name: 'RecordExamine',
  components: {
    RecordList,
    ExamineList,
    DatePickerModal
  },
  data () {
    return {
      dateModal: false,
      currentMonth: new Date().getMonth() + 1
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo
    })
  },
  methods: {
    dateModalConfrim (value) {
      this.currentMonth = new Date(value).getMonth() + 1
      this.dateModal = false
    }
  }
}
</script>
<style lang="less" scoped>
.page{
  background: #f3f3f3;
}
/deep/.van-tabs__line {
  background-color: #ff6633;
}
.van-row{
  background: #ff6633;
  padding: .875rem;
}
.info-box{
  text-align: left;
  color: #fff;
  font-size: .875rem;
  line-height:1.5rem;
}
</style>
